<template>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="项目名称" prop="projectName">
    <el-input placeholder="请输入项目名称" v-model="ruleForm.projectName"></el-input>
  </el-form-item>
  <el-form-item label="创建人" prop="creator">
    <el-input placeholder="请输入创建人" v-model="ruleForm.creator"></el-input>
  </el-form-item>
  <el-form-item label="创建时间"  prop="createDate">  
          <el-date-picker type="datetime" placeholder="选择日期时间" v-model="ruleForm.createDate" style="width: 100%;"></el-date-picker>
  </el-form-item>
  <el-form-item label="重要程度" prop="importance">
    <el-slider :show-stops=true :show-input=true :min=0 :max=10 v-model="ruleForm.importance"></el-slider>
  </el-form-item>
  <el-form-item label="项目状态" prop="proState">
    <el-input placeholder="请填写项目状态" v-model="ruleForm.proState"></el-input>
  </el-form-item>
  <el-form-item label="项目说明" prop="desc">
    <el-input  placeholder="请填写项目说明" type="textarea" v-model="ruleForm.desc"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
  </el-form-item>
</el-form>
</template>
<script>
//  import axios from 'axios'
 export default {
   data () {
     return {
       rules: {
         projectName: [
            { required: true, message: '请输入项目名称', trigger: 'blur' }
         ],
         creator: [
            { required: true, message: '请输入创建人', trigger: 'blur' }
         ],
         createDate: [
            { type: 'date', required: true, message: '请填写创建日期', trigger: 'change' }
         ],
         proState: [
            { required: true, message: '请填写项目状态', trigger: 'blur' }
         ],
         desc: [
            { required: true, message: '请填写项目说明', trigger: 'blur' }
         ]
       }
     }
   },
   methods: {
     submitForm (formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
          //  axios.post('/api/save', this.formName).then(function (res) {
          //    if (res.status === 200) {
          //      this.$message('项目保存成功')
           this.$emit('saveProject', this.ruleForm)
          //    }
          //  })
         } else {
           this.$message('请按要求填写项目信息')
           return false
         }
       })
     },
     resetForm (formName) {
       this.$refs[formName].resetFields()
     }
   },
   props: [
     'ruleForm'
   ]
 }
</script>
<style>
 .demo-ruleForm {
     padding:50px 100px
 }
</style>